In this article, I have tried to explain use of Delegate method with jQuery.
The delegate () method use for handle a single event for different control such as if you have many control in your HTML page like (button, hyperlink, radio button, checkbox and etc) and you want to fire common event on the click of any control, then we will use the delegate () method and this delegate () method will work for both controls current as well as future (like a new element created by a script).
Syntax:-
$(selector).delegate( childSelector, event, data, function)
jQuery Selectors
Through the jQuery Selectors we can select and frame up HTML element(s).it will help to find elements based on their id, classes, types, , attributes, values of attributes and much more. It is based on the existing CSS Selectors, and in addition, it has some own custom selectors. Any type of selectors in jQuery start with the dollar sign and parentheses: “$()”.The jQuery element selector selects elements based on their tag names.
i.e.
$("input").on("click", function () {alert(“You Clicked on Input Tag”);}
Sr. |
Parameter |
Description |
1 |
childSelector |
Specify one or more child controls to attach the event handler this parameter is necessary. |
2 |
Event |
Specify one or more Events to attach the controls and multiple Events values by separating the space but events should be valid this parameter is necessary. |
3 |
data |
This parameter is optional it will give the additional data pass for the function. |
4 |
function |
Specifies the function to run when the event occurs this parameter is necessary. |
Example:
I will take an example for illustrate the Delegate method in jQuery.
In this example I have many controls (input, hyperlink, comboBox and image) and if I click on any control will execute a single event function and will show an alert message. And you must have jquery file in your home directory.
And this example will give the below output.
My HTML Code:
<table border="1px">
<tr>
<td><input type="button" id="btnButton1" value="Button1" /></td>
<td><input type="button" id="btnButton2" value="Button2" /></td>
</tr>
<tr>
<td>a href="#">HyperLink1</a></td>
<td> <a href="#">HyperLink2</a> </td>
</tr>
<tr>
<td>select>
<option value="up">U.P</option>
<option value="mp">M.P</option>
<option value="hp">H.P</option>
<option value="jk">J&K</option>
</select>
</td>
<td>
<select>
<option value="ald">Allahabad</option>
<option value="rewa">Rewa</option>
<option value="kanpur">Kanpur</option>
<option value="noida">Noida</option>
</select>
</td>
</tr>
<tr>
<td><img src="twitter.png" alt="twitter" width="42" height="42"></td>
</tr>
</table>
My jQuery Code:
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input").on("click", function () {
var message = "Click :" + $(this).val();
alert(message);
})
$("a ").on("click", function () {
var message = "Click :" + $(this).text() ;
alert(message);
})
$("option").on("click", function () {
var message = "Select :" + $(this).text();
alert(message);
})
$("img").on("click", function () {
alert("image");
})
});
</script>
Leave Comment